<template>
	<div style="display: flex;align-items: center; justify-content: center;" v-loading="pieLoading"
		element-loading-text="加载中" element-loading-spinner="el-icon-loading">
		<div style="width: 70%;display: flex; align-items: center;justify-content: center;">
			<div id="m-chart" ref="pieChart" :style="chartStyle"></div>
		</div>
<!--		<div style="width: 30%;" v-if="handleData.length > 0">-->
<!--			<el-table :data="handleData" stripe height="600" border>-->
<!--				<el-table-column label="ID">-->
<!--					<template #default="scope">-->
<!--						{{handleData[scope.$index]}}-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--				<el-table-column label="操作">-->
<!--					<template #default="scope">-->
<!--						<el-button @click="aaa(scope.row)">点击</el-button>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--			</el-table>-->
<!--			<page-component @pageChanged="onPageSizeChanged" :key="pieSeriesData"></page-component>-->
<!--		</div>-->

	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		provide() { // 这里定义provide 传递参数
			return {
				pagination: this.pagination // 分页属性
			}
		},
		data() {
			return {
				pieLoading: false,
				pieChart: null,
				chartStyle: {
					width: "600px",
					height: "600px"
				},
				pieOption: {},
				pieTitle: this.pie_title,
				seriesData: this.pie_data,
				legendData: [],

				handleData: [],
				pagination: {
					currentPage: 1,
					pageSize: 10,
					banNext: false
				},
				start: '',
				end: '',
				pieSeriesData: [],


      }
		},
		props: ['pie_title', 'pie_data', 'pie_style'],
		watch: {
			pie_title(val) {
				this.pieTitle = val;
			},
			pie_data(val) {
				this.seriesData = val;
			},
		},
		mounted() {
      this.seriesData.filter(item => {
				if (item.name == '其他错误') {
					this.legendData.push('其他错误');
				}
				if (item.name == '接口调用成功') {
					this.legendData.push('接口调用成功');
				}
				if (item.name == '未解析错误') {
					this.legendData.push('未解析错误');
				}
				if (item.name == '前置处理错误') {
					this.legendData.push('前置处理错误');
				}
				return this.legendData;
			})

			this.initPieChart();
		},
		methods: {
			initPieChart() {
				let self = this;
				self.pieChart = echarts.init(self.$refs.pieChart);
				self.pieOption = {
					title: {
						text: self.pieTitle,
						left: '40%'
					},
					tooltip: {
						trigger: 'item',
						textStyle: {
							width: 200,
						}
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: self.legendData
					},
					series: [{
						name: self.pieTitle,
						type: 'pie',
						radius: '50%',
						data: self.seriesData,
						center: ['60%', '50%'],
						label: {
							width: 200,
							show: false,
						},
						emphasis: {
							label: {
								show: true
							},
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						itemStyle: {
							color: function(data) {
								var colorList = ['#007bbb', '#856859', '#5383c3', '#6f514c', '#5a79ba',
									'#433d3c', '#4c6cb3', '#1e50a2',
									'#19448e', '#164a84', '#a69425', '#203744', '#393f4c'
								]
								switch (data.data.name) {
									case '其他错误':
										return '#f56c6c'
									case '前置处理错误':
										return '#9F1F11'
									case '接口调用成功':
										return '#67c23a'
									case '未解析错误':
										return '#909399'
									default:
										return colorList[data.dataIndex]
								}
							}
						}
					}]
				};
				self.pieChart.setOption(self.pieOption);
				self.pieChart.on('click', 'series', function(params) {
					self.$nextTick(() => {
						self.onPieItem(params.data.data);
					})
				});
			},

			// 点击饼图item返回数据
			onPieItem(data) {
				let self = this;
				self.pieSeriesData = data;
				self.start = (self.pagination.currentPage - 1) * self.pagination.pageSize;
				if (self.start >= self.pieSeriesData.length) {
					self.start = 0;
					self.pagination.currentPage = self.start;
				}
				self.end = self.pagination.currentPage * self.pagination.pageSize;
				if (self.end >= self.pieSeriesData.length) {
					self.end = self.pieSeriesData.length;
					self.pagination.pageSize = self.end;
				}
				self.handleData = self.pieSeriesData.slice(self.start, self.end);
				if (self.handleData.length < 10) {
					self.pagination.banNext = true;
				}
			},

			onPageSizeChanged({
				currentPage,
				pageSize,
				banNext
			}) {
				let self = this;
				this.pagination.currentPage = currentPage;
				this.pagination.pageSize = pageSize;
				this.pagination.banNext = banNext;
				self.onPieItem(self.pieSeriesData);
			},
		}
	}
</script>

<style scoped lang="scss">
	// #m-chart {
	// 	width: 100%;
	// 	height: 600px;
	// }
</style>
